<template>
  <div class="club-management">
    <div class="club-list-section" v-if="!selectedClub">
      <div v-if="approvedClubs.length === 0 && pendingApplications.length === 0" class="empty-state">
        <p class="empty-message">您现在尚未拥有社团</p>
        <div class="button-group">
          <button class="custom-button primary-button" @click="showCreateClubForm = true">创建社团</button>
        </div>
      </div>
      <div v-else class="participation-container">
        <div class="participation-header">
          <span>社团管理</span>
        </div>
        <el-tabs v-model="clubListTab" class="tabs-full-height">
          <el-tab-pane label="我是社长" name="president">
            <div class="table-container">
              <el-row :gutter="20">
                <el-col v-for="(club, index) in approvedClubs" :key="club.id" :span="8">
                  <el-card :class="['club-card', `decoration-${index % 6 + 1}`]" shadow="hover" @click="selectClub(club)">
                    <div class="club-content">
                      <div class="club-card-header">
                        <div class="club-name-container">
                          <h3 class="club-name">{{ club.name }}</h3>
                          <div class="club-card-line">
                            <svg fill="none" height="15" viewBox="0 0 91 15" width="91" xmlns="http://www.w3.org/2000/svg">
                              <path d="m2 10.8247c2.74016-.5756 21-6.13888 28.0866-6.13888 9.4526 0 10.7953 9.85398 21.4134 7.36008 8.4945-1.9951 26.8819-7.36016 37.5-10.0459" 
                                    stroke="#ea5a26" 
                                    stroke-linecap="round" 
                                    stroke-width="6"/>
                            </svg>
                          </div>
                        </div>
                        <div class="club-card-tags">
                          <el-tag type="success" effect="dark">已通过</el-tag>
                        </div>
                      </div>

                      <p class="club-desc">{{ club.description }}</p>
                      <div class="club-info">
                        <p><el-icon><Phone /></el-icon>联系方式：{{ club.contact }}</p>
                        <p><el-icon><Location /></el-icon>活动场地：{{ club.location }}</p>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>

          <el-tab-pane label="待审核社团" name="pending">
            <div class="table-container">
              <el-row :gutter="20">
                <el-col v-for="(club, index) in pendingApplications" :key="club.id" :span="8">
                  <el-card :class="['club-card', `decoration-${index % 6 + 1}`]" shadow="hover">
                    <div class="club-content">
                      <div class="club-card-header">
                        <div class="club-name-container">
                          <h3 class="club-name">{{ club.name }}</h3>
                          <div class="club-card-line">
                            <svg fill="none" height="15" viewBox="0 0 91 15" width="91" xmlns="http://www.w3.org/2000/svg">
                              <path d="m2 10.8247c2.74016-.5756 21-6.13888 28.0866-6.13888 9.4526 0 10.7953 9.85398 21.4134 7.36008 8.4945-1.9951 26.8819-7.36016 37.5-10.0459" 
                                    stroke="#ea5a26" 
                                    stroke-linecap="round" 
                                    stroke-width="6"/>
                            </svg>
                          </div>
                        </div>
                        <div class="club-card-tags">
                          <el-tag type="warning" effect="dark">待审核</el-tag>
                        </div>
                      </div>

                      <p class="club-desc">{{ club.description }}</p>
                      <div class="club-info">
                        <p><el-icon><Phone /></el-icon>联系方式：{{ club.contact }}</p>
                        <p><el-icon><Location /></el-icon>活动场地：{{ club.location }}</p>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>

          <el-tab-pane label="审核通知" name="rejected">
            <div class="table-container">
              <el-row :gutter="20">
                <el-col v-for="(club, index) in rejectedClubs" :key="club.id" :span="8">
                  <el-card :class="['club-card', `decoration-${index % 6 + 1}`]" shadow="hover">
                    <div class="club-content">
                      <div class="club-card-header">
                        <div class="club-name-container">
                          <h3 class="club-name">{{ club.name }}</h3>
                          <div class="club-card-line">
                            <svg fill="none" height="15" viewBox="0 0 91 15" width="91" xmlns="http://www.w3.org/2000/svg">
                              <path d="m2 10.8247c2.74016-.5756 21-6.13888 28.0866-6.13888 9.4526 0 10.7953 9.85398 21.4134 7.36008 8.4945-1.9951 26.8819-7.36016 37.5-10.0459" 
                                    stroke="#ea5a26" 
                                    stroke-linecap="round" 
                                    stroke-width="6"/>
                            </svg>
                          </div>
                        </div>
                        <div class="club-card-tags">
                          <el-tag type="danger" effect="dark">已被审核拒绝</el-tag>
                        </div>
                      </div>

                      <p class="club-desc">{{ club.description }}</p>
                      <div class="club-info">
                        <p><el-icon><Phone /></el-icon>联系方式：{{ club.contact }}</p>
                        <p><el-icon><Location /></el-icon>活动场地：{{ club.location }}</p>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>

        <!--创建新社团按键-->
        <div class="action-buttons mt-4" style="padding: 24px; width: unset;">
          <button class="custom-button primary-button" @click="showCreateClubForm = true">创建新社团</button>
        </div>
      </div>
    </div>
    <div v-else class="club-management-section">
      <div class="management-header">
        <button class="custom-button back-button" @click="backToList">
          <el-icon><ArrowLeft /></el-icon>
          返回社团列表
        </button>
        <h2 class="club-title">{{ selectedClub.name }}</h2>
      </div>
      <div class="management-content">
        <div class="management-tabs">
          <div class="tab-buttons">
            <button 
              v-for="tab in managementTabs" 
              :key="tab.name"
              :class="['tab-button', { active: activeTab === tab.name }]"
              @click="activeTab = tab.name"
            >
              {{ tab.label }}
            </button>
          </div>

          <!-- 活动管理面板 -->
          <div v-if="activeTab === 'activity'" class="tab-content">
            <div class="action-header">
              <button class="custom-button primary-button" @click="dialogVisible = true">
                <el-icon><Plus /></el-icon>
                发布新活动
              </button>
            </div>
            <div class="table-container">
              <el-table 
                :data="activities"
                class="custom-table"
              >
                <el-table-column prop="title" label="活动名称"></el-table-column>
                <el-table-column label="活动时间" width="300" align="center">
                  <template #default="scope">
                    {{ formatDateTime(scope.row.startTime) }} 至 {{ formatDateTime(scope.row.endTime) }}
                  </template>
                </el-table-column>
                <el-table-column prop="location" label="活动地点" align="center"></el-table-column>
                <el-table-column prop="maxAttendees" label="人数上限" width="80" align="center"></el-table-column>
                <el-table-column label="状态" width="100" align="center">
                  <template #default="scope">
                    <span :class="['status-tag', getStatusType(scope.row.status)]">
                      {{ getStatusText(scope.row.status) }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template #default="scope">
                    <div class="action-buttons">
                      <button class="custom-button" @click="handleEdit(scope.row)">
                        <el-icon><Edit /></el-icon>
                        编辑
                      </button>
                      <button class="custom-button" @click="viewAttendance(scope.row)">
                        <el-icon><Check /></el-icon>
                        签到
                      </button>
                      <button class="custom-button" @click="viewSignups(scope.row)">
                        <el-icon><View /></el-icon>
                        报名
                      </button>
                      <button class="custom-button" @click="viewPayment(scope.row)">
                        <el-icon><Money /></el-icon>
                        缴费
                      </button>
                      <button class="custom-button" @click="showPublishSummary(scope.row)">
                        <el-icon><DocumentAdd /></el-icon>
                        总结
                      </button>
                      <button class="custom-button danger" @click="handleDelete(scope.row.activityId)">
                        <el-icon><Delete /></el-icon>
                        删除
                      </button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <!-- 成员管理面板 -->
          <div v-if="activeTab === 'member'" class="tab-content">
            <div class="member-tabs">
              <div class="tab-buttons">
                <button 
                  :class="['tab-button', { active: memberActiveTab === 'applications' }]"
                  @click="memberActiveTab = 'applications'"
                >成员申请</button>
                <button 
                  :class="['tab-button', { active: memberActiveTab === 'list' }]"
                  @click="memberActiveTab = 'list'"
                >成员列表</button>
              </div>

              <div v-if="memberActiveTab === 'applications'" class="tab-content">
                <div class="table-container">
                  <el-table :data="memberApplications" class="custom-table">
                    <el-table-column prop="username" label="用户名"></el-table-column>
                    <el-table-column prop="realName" label="真实姓名"></el-table-column>
                    <el-table-column prop="applyTime" label="申请时间">
                      <template #default="scope">
                        {{ new Date(scope.row.applyTime).toLocaleString() }}
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                      <template #default="scope">
                        <div class="action-buttons">
                          <button class="custom-button success" @click="handleApprove(scope.row)">
                            <el-icon><CircleCheck /></el-icon>
                            通过
                          </button>
                          <button class="custom-button danger" @click="handleReject(scope.row)">
                            <el-icon><Delete /></el-icon>
                            拒绝
                          </button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <div v-if="memberActiveTab === 'list'" class="tab-content">
                <div class="table-container">
                  <el-table :data="members" class="custom-table">
                    <el-table-column prop="username" label="用户名">
                      <template #default="scope">
                        <span>{{ scope.row.username }}</span>
                        <span v-if="scope.row.userId === userId" class="member-tag">我</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="realName" label="真实姓名"></el-table-column>
                    <el-table-column label="加入时间">
                      <template #default="scope">
                        {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm') }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="role" width="100" label="角色" align="center">
                      <template #default="scope">
                        <span :class="['role-tag', { 'president': scope.row.role === '社长' }]">
                          {{ scope.row.role }}
                        </span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="400" align="center">
                      <template #default="scope">
                        <div class="action-buttons">
                          <button class="custom-button" @click="checkMemberInfo(scope.row)">详细信息</button>
                          <button class="custom-button" @click="manageMemberRole(scope.row)">权限管理</button>
                          <button class="custom-button danger" @click="removeMember(scope.row.userId)">移除</button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>

          <!-- 社团信息管理面板 -->
          <div v-if="activeTab === 'info'" class="tab-content">
            <div class="info-form-container">
              <el-form :model="clubInfo" label-width="100px" class="info-form">
                <el-form-item label="社团名称">
                  <el-input v-model="clubInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="社团简介">
                  <el-input type="textarea" v-model="clubInfo.description" rows="4"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                  <el-input v-model="clubInfo.contact"></el-input>
                </el-form-item>
                <el-form-item label="活动场地">
                  <el-input v-model="clubInfo.venue"></el-input>
                </el-form-item>
                <el-form-item>
                  <button class="custom-button primary-button" @click="updateClubInfo">保存修改</button>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 解散管理面板 -->
          <div v-if="activeTab === 'delete'" class="delete-panel">
            <div class="warning-container">
              <el-icon class="warning-icon" color="#ff4949"><Warning /></el-icon>
              <p class="warning-text">请谨慎操作，解散社团后将无法恢复！</p>
            </div>
            <div class="action-buttons delete-action">
              <button class="custom-button danger delete-button" @click="showDeleteConfirm = true">
                <el-icon><Delete /></el-icon>
                解散社团
              </button>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>

  <!-- 创建社团对话框 -->
  <div v-if="showCreateClubForm" class="custom-dialog-overlay" @click="showCreateClubForm = false">
    <div class="custom-dialog" @click.stop>
      <div class="custom-dialog-header">
        <h3>创建社团</h3>
        <button class="close-button" @click="showCreateClubForm = false">×</button>
      </div>
      <div class="custom-dialog-body">
        <el-form :model="createClubForm" label-width="100px" class="create-club-form">
          <el-form-item label="社团名称" required>
            <el-input v-model="createClubForm.name"></el-input>
          </el-form-item>
          <el-form-item label="社团简介" required>
            <el-input type="textarea" v-model="createClubForm.description" rows="4"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" required>
            <el-input v-model="createClubForm.contact"></el-input>
          </el-form-item>
          <el-form-item label="活动场地" required>
            <el-input v-model="createClubForm.location"></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <button class="custom-button danger" @click="showCreateClubForm = false">取消</button>
          <button class="custom-button" @click="submitCreateClub">提交申请</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 发布活动对话框 -->
  <div v-if="dialogVisible" class="custom-dialog-overlay" @click="dialogVisible = false">
    <div class="custom-dialog" @click.stop>
      <div class="custom-dialog-header">
        <h3>发布活动</h3>
        <button class="close-button" @click="dialogVisible = false">×</button>
      </div>
      <div class="custom-dialog-body">
        <el-form :model="activityForm" label-width="100px" :rules="activityRules" ref="activityFormRef">
          <el-form-item label="活动标题" prop="title">
            <el-input v-model="activityForm.title"></el-input>
          </el-form-item>
          <el-form-item label="活动描述" prop="description">
            <el-input type="textarea" v-model="activityForm.description" rows="3"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="activityForm.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="activityForm.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="活动地点" prop="location">
            <el-input v-model="activityForm.location"></el-input>
          </el-form-item>
          <el-form-item label="最大人数" prop="maxAttendees">
            <el-input-number v-model="activityForm.maxAttendees" :min="1" :max="1000"></el-input-number>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <button class="custom-button danger" @click="dialogVisible = false">取消</button>
          <button class="custom-button" @click="submitActivity">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 解散社团确认对话框 -->
  <div v-if="showDeleteConfirm" class="custom-dialog-overlay" @click="showDeleteConfirm = false">
    <div class="custom-dialog" @click.stop>
      <div class="custom-dialog-header">
        <h3>解散社团确认</h3>
        <button class="close-button" @click="showDeleteConfirm = false">×</button>
      </div>
      <div class="custom-dialog-body">
        <p class="warning-text">确定要解散该社团吗？此操作不可恢复！</p>
        <div class="dialog-footer">
          <button class="custom-button" @click="showDeleteConfirm = false">取消</button>
          <button class="custom-button danger" @click="deleteClub">确定解散</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 编辑活动对话框 -->
  <div v-if="editDialogVisible" class="custom-dialog-overlay" @click="editDialogVisible = false">
    <div class="custom-dialog" @click.stop>
      <div class="custom-dialog-header">
        <h3>编辑活动信息</h3>
        <button class="close-button" @click="editDialogVisible = false">×</button>
      </div>
      <div class="custom-dialog-body">
        <el-form :model="editActivityForm" label-width="100px" :rules="activityRules" ref="editActivityFormRef">
          <el-form-item label="活动标题" prop="title">
            <el-input v-model="editActivityForm.title"></el-input>
          </el-form-item>
          <el-form-item label="活动描述" prop="description">
            <el-input type="textarea" v-model="editActivityForm.description" rows="3"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="editActivityForm.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="editActivityForm.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="活动地点" prop="location">
            <el-input v-model="editActivityForm.location"></el-input>
          </el-form-item>
          <el-form-item label="最大人数" prop="maxAttendees">
            <el-input-number v-model="editActivityForm.maxAttendees" :min="1" :max="1000"></el-input-number>
          </el-form-item>
          <el-form-item label="活动状态" prop="status">
            <el-select v-model="editActivityForm.status">
              <el-option label="未开始" :value="0"></el-option>
              <el-option label="进行中" :value="1"></el-option>
              <el-option label="已结束" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <button class="custom-button danger" @click="editDialogVisible = false">取消</button>
          <button class="custom-button" @click="submitEditActivity">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 发布总结对话框 -->
  <div v-if="summaryDialogVisible" class="custom-dialog-overlay" @click="summaryDialogVisible = false">
    <div class="custom-dialog" @click.stop>
      <div class="custom-dialog-header">
        <h3>发布活动总结</h3>
        <button class="close-button" @click="summaryDialogVisible = false">×</button>
      </div>
      <div class="custom-dialog-body">
        <el-form :model="summaryForm" label-width="100px">
          <el-form-item label="活动总结" required>
            <el-input type="textarea" v-model="summaryForm.summary" rows="6" placeholder="请输入活动总结内容"></el-input>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <button class="custom-button danger" @click="summaryDialogVisible = false">取消</button>
          <button class="custom-button" @click="submitSummary">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 成员详情对话框 -->
  <div v-if="memberInfoVisible" class="custom-dialog-overlay" @click="memberInfoVisible = false">
    <div class="custom-dialog" @click.stop>
      <div class="custom-dialog-header">
        <h3>成员详细信息</h3>
        <button class="close-button" @click="memberInfoVisible = false">×</button>
      </div>
      <div class="custom-dialog-body">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="用户名">{{ selectedMember?.username }}</el-descriptions-item>
          <el-descriptions-item label="真实姓名">{{ selectedMember?.realName }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ selectedMember?.contact }}</el-descriptions-item>
          <el-descriptions-item label="加入时间">{{ dayjs(selectedMember?.createTime).format('YYYY-MM-DD HH:mm') }}</el-descriptions-item>
          <el-descriptions-item label="当前角色">{{ selectedMember?.role }}</el-descriptions-item>
        </el-descriptions>
        <div class="dialog-footer">
          <button class="custom-button danger" @click="memberInfoVisible = false">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 权限管理对话框 -->
  <div v-if="roleManageVisible" class="custom-dialog-overlay" @click="roleManageVisible = false">
    <div class="custom-dialog" @click.stop style="width: 400px;">
      <div class="custom-dialog-header">
        <h3>权限管理</h3>
        <button class="close-button" @click="roleManageVisible = false">×</button>
      </div>
      <div class="custom-dialog-body">
        <el-form :model="roleForm" label-width="100px">
          <el-form-item label="成员角色">
            <el-select v-model="roleForm.role">
              <el-option label="副社长" value="副社长"></el-option>
              <el-option label="普通成员" value="普通成员"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <button class="custom-button danger" @click="roleManageVisible = false">取消</button>
          <button class="custom-button" @click="submitRoleChange">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 签到情况对话框 -->
  <div v-if="attendanceDialogVisible" class="custom-dialog-overlay" @click="attendanceDialogVisible = false">
    <div class="custom-dialog" @click.stop style="width: 800px; max-height: 600px;">
      <div class="custom-dialog-header">
        <h3 style="color: #303133;">签到情况</h3>
        <button class="close-button" @click="attendanceDialogVisible = false">×</button>
      </div>
      <div class="custom-dialog-body" style="padding: 20px;">
        <div v-loading="attLoading" style="min-height: 400px;">
          <div class="attendance-summary" style="margin-bottom: 20px; background: #f5f7fa; border-radius: 4px; padding: 12px 20px;">
            <span class="summary-item" style="color: #303133; font-size: 16px; font-weight: 500;">总签到人数：{{ attendanceList.length }}</span>
          </div>
          <div class="table-wrapper" style="max-height: 400px; overflow-y: auto;">
            <table class="custom-table">
              <thead style="position: sticky; top: 0; background: #f5f7fa; z-index: 1;">
                <tr>
                  <th style="width: 200px; color: #303133;">用户名</th>
                  <th style="width: 200px; color: #303133;">真实姓名</th>
                  <th style="width: 300px; color: #303133;">签到时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in attendanceList" :key="item.id">
                  <td style="color: #303133;">{{ item.username }}</td>
                  <td style="color: #303133;">{{ item.realName }}</td>
                  <td style="color: #303133;">{{ dayjs(item.attendanceTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
                </tr>
                <tr v-if="attendanceList.length === 0">
                  <td colspan="3" style="text-align: center; padding: 20px; color: #909399;">暂无签到记录</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 报名情况对话框 -->
  <div v-if="signupDialogVisible" class="custom-dialog-overlay" @click="signupDialogVisible = false">
    <div class="custom-dialog" @click.stop style="width: 800px; min-height: 400px;">
      <div class="custom-dialog-header">
        <h3 style="color: #303133;">报名情况</h3>
        <button class="close-button" @click="signupDialogVisible = false">×</button>
      </div>
      <div class="custom-dialog-body">
        <div v-loading="loading" style="min-height: 300px;">
          <table class="custom-table">
            <thead>
              <tr>
                <th style="color: #303133;">用户名</th>
                <th style="color: #303133;">真实姓名</th>
                <th style="color: #303133;">报名时间</th>
                <th style="color: #303133;">状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in signupMembers" :key="item.id">
                <td style="color: #303133;">{{ item.username }}</td>
                <td style="color: #303133;">{{ item.realName }}</td>
                <td style="color: #303133;">{{ dayjs(item.registerTime).format('YYYY-MM-DD HH:mm:ss') }}</td>
                <td>
                  <span :class="['status-tag', item.status === 1 ? 'success' : 'info']">
                    {{ item.status === 1 ? '已报名' : '待确认' }}
                  </span>
                </td>
              </tr>
              <tr v-if="signupMembers.length === 0">
                <td colspan="4" style="text-align: center; padding: 20px; color: #909399;">暂无报名记录</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- 缴费管理对话框 -->
  <div v-if="showPaymentDialog" class="custom-dialog-overlay" @click="showPaymentDialog = false">
    <div class="custom-dialog" @click.stop style="width: 800px; height: 600px;">
      <div class="custom-dialog-header">
        <h3 style="color: #303133;">缴费管理</h3>
        <button class="close-button" @click="showPaymentDialog = false">×</button>
      </div>
      <div class="custom-dialog-body" style="height: calc(100% - 60px); display: flex; flex-direction: column;">
        <div class="payment-summary">
          <div class="payment-info">
            <div class="payment-item">
              <span class="payment-label">总缴费人数：</span>
              <span class="payment-amount">{{ totalPaymentsNum }}</span>
            </div>
            <div class="payment-item">
              <span class="payment-label">已缴费金额：</span>
              <span class="payment-amount success">¥{{ totalPayments }}</span>
            </div>
            <div class="payment-item">
              <span class="payment-label">待缴费金额：</span>
              <span class="payment-amount warning">¥{{ pendingPayments }}</span>
            </div>
          </div>
        </div>

        <div class="action-header">
          <button class="custom-button primary-button" @click="showInitiatePaymentDialog = true">
            <el-icon><Plus /></el-icon>
            发起缴费
          </button>
        </div>

        <div class="table-wrapper" style="max-height: 400px; overflow-y: auto;">
          <table class="custom-table">
            <thead>
              <tr>
                <th style="color: #303133;">用户名</th>
                <th style="color: #303133;">真实姓名</th>
                <th style="color: #303133;">金额</th>
                <th style="color: #303133;">状态</th>
                <th style="color: #303133;">缴费时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in paymentRecords" :key="item.id">
                <td style="color: #303133;">{{ item.username }}</td>
                <td style="color: #303133;">{{ item.realName }}</td>
                <td style="color: #303133;">¥{{ item.amount }}</td>
                <td>
                  <span :class="['status-tag', item.status === 1 ? 'success' : 'warning']">
                    {{ item.status === 1 ? '已缴费' : '待缴费' }}
                  </span>
                </td>
                <td style="color: #303133;">{{ item.paymentTime ? dayjs(item.paymentTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}</td>
              </tr>
              <tr v-if="paymentRecords.length === 0">
                <td colspan="5" style="text-align: center; padding: 20px; color: #909399;">暂无缴费记录</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- 发起缴费对话框 -->
  <el-dialog v-model="showInitiatePaymentDialog" title="发起缴费" width="500px" :append-to-body="true">
    <el-form :model="initiatePaymentForm" label-width="100px">
      <el-form-item label="缴费金额" required>
        <el-input-number v-model="initiatePaymentForm.amount" :min="0" :precision="2" :step="10"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <button class="custom-button" @click="showInitiatePaymentDialog = false">取消</button>
        <button class="custom-button" @click="submitInitiatePayment">确定</button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.delete-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: #fff1f0;
  border-radius: 8px;
  border: 1px solid #ffccc7;
  min-height: 300px;
}

.warning-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(255, 73, 73, 0.1);
  width: 100%;
  max-width: 400px;
}

.warning-icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: #ff4949;
}

.warning-text {
  color: #ff4949;
  font-size: 16px;
  margin: 0;
  text-align: center;
  font-weight: 500;
}

.delete-action {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 400px;
}

.delete-button {
  padding: 12px 24px;
  font-size: 16px;
  transition: all 0.3s ease;
  display: flex;
}

.delete-button:hover {
  background-color: #ff7875;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 73, 73, 0.2);
}

@import '../assets/styles/button.scss';

.club-management {
  padding: 0;
  height: 100%;
}

.participation-container {
  height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 3px solid #0a4472;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* .participation-container::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  background-image: url('../assets/img/img_case1Human.png');
  background-size: contain;
  background-repeat: no-repeat;
  bottom: -30px;
  right: -100px;
  z-index: 2;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

.participation-container::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background-image: url('../assets/img/参考/obj_cloud4.png');
  background-size: contain;
  background-repeat: no-repeat;
  left: -130px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
  animation-delay: 1s;
} */

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.participation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  height: 60px;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.participation-header span {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 12px;
  line-height: 1;
}

.participation-header span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #0a4472;
  border-radius: 2px;
}

.tabs-full-height {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  padding: 0 20px;
  overflow: hidden;
}

.tabs-full-height :deep(.el-tabs__header) {
  margin-bottom: 24px;
  order: -1;
  display: flex;
  justify-content: center;
}

.tabs-full-height :deep(.el-tabs__nav-wrap) {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

.tabs-full-height :deep(.el-tabs__nav) {
  display: flex;
  justify-content: center;
  border: none !important;
}

.tabs-full-height :deep(.el-tabs__item) {
  position: relative;
  padding: 8px 16px !important;
  height: auto !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  color: #1B365D !important;
  background: none !important;
  border: none !important;
  margin: 0 12px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: 'REEJI-HaoHengGB-Heavy', sans-serif;
  font-weight: 500;
}

.tabs-full-height :deep(.el-tabs__item::after) {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 8px;
  opacity: 0;
  background-color: #EA5A26;
  inset: 60% -4px 0 -4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tabs-full-height :deep(.el-tabs__item:hover) {
  color: #EA5A26 !important;
  transform: translateY(-1px);
}

.tabs-full-height :deep(.el-tabs__item:hover::after) {
  opacity: 0.2;
  inset: 40% -4px 0 -4px;
}

.tabs-full-height :deep(.el-tabs__item.is-active) {
  color: #EA5A26 !important;
  font-weight: 600 !important;
}

.tabs-full-height :deep(.el-tabs__item.is-active::after) {
  opacity: 0.3;
  inset: 0 -4px 0 -4px;
}

.tabs-full-height :deep(.el-tabs__active-bar) {
  display: none !important;
}

.tabs-full-height :deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.tabs-full-height :deep(.el-tab-pane) {
  height: 100%;
  overflow: hidden;
}

.table-container {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.table-container::-webkit-scrollbar {
  width: 6px;
}

.table-container::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.club-card {
  background: #2d4f42;
  border-radius: 16px;
  overflow: visible;
  height: 280px;
  display: flex;
  flex-direction: column;
  color: white;
  transition: transform 0.3s ease;
  position: relative;
  margin-bottom: 20px;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer;
}

.club-card::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  transform-origin: 50% 0;
  transition: transform 0.3s ease;
}

.club-card.decoration-1::before {
  z-index: 2;
  background-image: url('../assets/img/img_case1Human.png');
  bottom: -20px;
  left: -20px;
}

.club-card.decoration-2::before {
  background-image: url('../assets/img/img_case2Human.png');
  bottom: -20px;
  left: -20px;
}

.club-card.decoration-3::before {
  background-image: url('../assets/img/obj_bard-recommend.png');
  bottom: -20px;
  right: -20px;
}

.club-card.decoration-4::before {
  background-image: url('../assets/img/obj_flower-recommend.png');
  top: -20px;
  left: -20px;
}

.club-card.decoration-5::before {
  background-image: url('../assets/img/img_case1Human.png');
  bottom: -20px;
  left: -20px;
}

.club-card.decoration-6::before {
  background-image: url('../assets/img/img_case2Human.png');
  top: -20px;
  left: -20px;
}

.club-card:hover::before {
  animation: swingEffect 3s ease-in-out infinite;
}

@keyframes swingEffect {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

.club-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15) !important;
}

.club-card:hover .club-card-line svg path {
  animation: redrawLine 1.5s ease-in-out;
}

.club-card-header {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.club-name-container {
  flex: 1;
}

.club-name {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  margin-bottom: 2px;
}

.club-card-line {
  display: block;
  margin: 4px 0 12px;
  width: 91px;
  height: 20px;
}

.club-card-line svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.club-card-line svg path {
  stroke: #e85c33;
  stroke-dasharray: 300;
  stroke-dashoffset: 0;
}

@keyframes redrawLine {
  0% {
    stroke-dashoffset: 300;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.club-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}

.club-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 72px; /* 设置最大高度为3行文字的高度 */
  position: relative; /* 添加相对定位 */
}

/* 添加一个渐变遮罩效果，使省略号更加自然 */
.club-desc::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, rgba(45, 79, 66, 0), rgba(45, 79, 66, 1));
  pointer-events: none;
  opacity: 0.8;
}

.club-info {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.8);
  padding-top: 10px; /* 增加与上方内容的间距 */
}

.club-info p {
  margin: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.club-info i {
  color: #e85c33;
  font-size: 16px;
}

.club-card-tags {
  margin-top: 0;
  margin-left: 10px;
}

.club-card-tags .el-tag {
  border: none;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.club-card-tags .el-tag--success {
  background: #e85c33;
  color: white;
}

.club-card-tags .el-tag--warning {
  background: #ffa41b;
  color: white;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
}

.empty-message {
  font-size: 18px;
  color: #909399;
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  gap: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #303133;
}

.management-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.club-title {
  margin: 0;
  font-size: 24px;
  color: #303133;
  font-weight: 600;
  font-family: 'REEJI-HaoHengGB-Heavy', sans-serif;
}

.management-content {
  padding: 20px;
  height: calc(100% - 80px);
  overflow: hidden;
}

.management-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tab-buttons {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #ebeef5;
  padding: 0 0px 12px 0px;
}

.tab-button {
  padding: 8px 16px;
  border: none;
  background: none;
  color: #606266;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  font-family: 'REEJI-HaoHengGB-Heavy', sans-serif;
}

.tab-button:hover {
  color: #0a4472;
  background: rgba(10, 68, 114, 0.1);
}

.tab-button.active {
  color: #0a4472;
  font-weight: 600;
  background: rgba(10, 68, 114, 0.1);
}

.tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.action-header {
  padding: 20px;
}

.table-container {
  flex: 1;
  overflow: auto;
  padding: 0 20px;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table th,
.custom-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}

.custom-table th {
  background: #f5f7fa;
  color: #303133;
  font-weight: 600;
}

.custom-table tr:hover {
  background: #f5f7fa;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;

  &.info {
    background-color: #f4f4f5;
    color: #909399;
  }

  &.success {
    background-color: #f0f9eb;
    color: #67c23a;
  }

  &.warning {
    background-color: #fdf6ec;
    color: #e6a23c;
  }

  &.danger {
    background-color: #fef0f0;
    color: #f56c6c;
  }
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-buttons .custom-button {
  padding: 4px 12px !important;
  min-width: unset !important;
}

.custom-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin: 0 !important;
  padding: 6px 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  color: #409EFF !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  transition: transform 0.2s !important;
  gap: 4px !important;

  &::after {
    content: '' !important;
    position: absolute !important;
    z-index: -1 !important;
    border-radius: 8px !important;
    opacity: 0.3 !important;
    background-color: #409EFF !important;
    inset: 50% -8px 0 -8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  &:hover {
    color: #409EFF !important;
    transform: translateY(-1px) !important;

    &::after {
      opacity: 0.4 !important;
      inset: 0 -8px !important;
    }
  }

  &:active {
    transform: translateY(0) !important;
    transition: transform 0.1s !important;

    &::after {
      opacity: 0.9 !important;
    }
  }

  &.danger {
    color: #f56c6c !important;

    &::after {
      background-color: #f56c6c !important;
    }

    &:hover {
      color: white !important;
    }
  }

  &.success {
    color: #67c23a !important;

    &::after {
      background-color: #67c23a !important;
    }

    &:hover {
      color: white !important;
    }
  }

  &.primary {
    color: #0a4472 !important;

    &::after {
      background-color: #0a4472 !important;
    }

    &:hover {
      color: white !important;
    }
  }

  .el-icon {
    margin-right: 4px;
    font-size: 16px;
  }
}

.member-tag {
  display: inline-block;
  padding: 2px 6px;
  background: #0a4472;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}

.role-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #f5f7fa;
  color: #606266;
  border-radius: 4px;
  font-size: 12px;
}

.role-tag.president {
  background: #0a4472;
  color: white;
}

.info-form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.info-form {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.custom-pagination {
  margin-top: 20px;
  padding: 20px 0;
  display: flex;
  justify-content: center;
}

.primary-button {
  color: #0a4472 !important;
  font-weight: 500;
}

.primary-button:hover::after {
  background-color: #0a4472 !important;
}

.primary-button:hover {
  color: white !important;
}

@media (max-width: 768px) {
  .management-header {
    padding: 16px;
  }
  
  .club-title {
    font-size: 20px;
  }
  
  .tab-buttons {
    padding: 0 16px 8px;
  }
  
  .tab-button {
    font-size: 14px;
    padding: 6px 12px;
  }
  
  .action-header {
    padding: 0 16px 16px;
  }
  
  .table-container {
    padding: 0 16px;
  }
  
  .action-buttons {
    flex-wrap: wrap;
  }
  
  .action-buttons .custom-button {
    flex: 1;
    min-width: 80px;
  }
}

.club-management-section {
  z-index: 0;
  height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #ffffff;
  border: 3px solid #0a4472;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
}

.club-management-section::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  background-image: url('../assets/img/img_case1Human.png');
  background-size: contain;
  background-repeat: no-repeat;
  bottom: -30px;
  right: -100px;
  z-index: 6;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

.club-management-section::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background-image: url('../assets/img/参考/obj_cloud4.png');
  background-size: contain;
  background-repeat: no-repeat;
  left: -130px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.custom-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-dialog {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  animation: dialog-fade-in 0.3s;
}

.custom-dialog-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-dialog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.close-button:hover {
  color: #606266;
}

.custom-dialog-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid #eee;
}

.dialog-footer .custom-button + .custom-button {
  margin-left: 10px;
}

@keyframes dialog-fade-in {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.custom-dialog .el-table {
  margin: -24px;
  width: calc(100% + 48px);
}

.custom-dialog :deep(.el-form-item__content),
.custom-dialog :deep(.el-input),
.custom-dialog :deep(.el-select),
.custom-dialog :deep(.el-date-picker) {
  width: 100%;
}

.custom-dialog :deep(.el-descriptions) {
  padding: 0;
}

.custom-dialog :deep(.el-descriptions__body) {
  background-color: transparent;
}

@media (max-width: 768px) {
  .custom-dialog {
    width: 95vw;
    margin: 20px;
  }
  
  .custom-dialog-body {
    padding: 16px;
  }
  
  .dialog-footer {
    padding: 12px 16px;
  }
}

.approved-clubs {
  padding: 20px;
}

.section-title {
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

.club-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.club-card:hover {
  transform: translateY(-5px);
}

.club-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.club-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.club-content {
  padding: 10px 0;
}




.club-management {
  /* padding: 24px; */
  height: 100%;
}

.management-tabs {
  margin-bottom: 24px;
}

.info-form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.mb-4 {
  margin-bottom: 16px;
}

.member-tabs {
  margin-top: 24px;
}
.payment-summary {
  background-color: #f0f9eb;
  /* padding: 20px; */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-info {
  gap: 20px;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}

.payment-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-label {
  font-size: 14px;
  color: #606266;
}

.payment-amount {
  color: #303133;
  font-size: 16px;
  font-weight: bold;
}

.payment-amount.success {
  color: #67c23a;
}

.payment-amount.warning {
  color: #e6a23c;
}

.pagination-container {
  margin-top: 40px;
}

.custom-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin: 0 !important;
  padding: 6px 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  color: #409EFF !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  transition: transform 0.2s !important;
  gap: 4px !important;

  &::after {
    content: '' !important;
    position: absolute !important;
    z-index: -1 !important;
    border-radius: 8px !important;
    opacity: 0.4 !important;
    background-color: #409EFF !important;
    inset: 50% -8px 0 -8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  &:hover {
    color: #409EFF !important;
    transform: translateY(-1px) !important;

    &::after {
      opacity: 0.3 !important;
      inset: 0 -8px !important;
    }
  }

  &:active {
    transform: translateY(0) !important;
    transition: transform 0.1s !important;

    &::after {
      opacity: 0.4 !important;
    }
  }

  &.danger {
    color: #f56c6c !important;

    &::after {
      background-color: #f56c6c !important;
    }

    &:hover {
      color: #f56c6c !important;
    }
  }

  &.success {
    color: #67c23a !important;

    &::after {
      background-color: #67c23a !important;
    }

    &:hover {
      color: white !important;
    }
  }

  &.primary {
    color: #0a4472 !important;

    &::after {
      background-color: #0a4472 !important;
    }

    &:hover {
      color: white !important;
    }
  }

  .el-icon {
    margin-right: 4px;
    font-size: 16px;
  }
}

.custom-button.primary-button {
  color: #e85c33 !important;
  font-size: 20px !important;
  font-family: 'REEJI-HaoHengGB-Heavy', sans-serif !important;
  padding: 8px 20px !important;
  min-width: 120px !important;

  &::after {
    background-color: #e85c33 !important;
  }

  &:hover {
    color: #e85c33 !important;

    &::after {
      opacity: 0.4 !important;
    }
  }

  &:active::after {
    opacity: 0.5 !important;
  }
}

.action-buttons {
  /* padding: 24px !important; */
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}
</style>

<script setup>
const emit = defineEmits(['activity-updated'])
import dayjs from 'dayjs'
import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import service from '../utils/request'
import { Edit, Delete, View, Check, Money, CircleCheck, DocumentAdd, Plus, ArrowLeft, Phone, Location } from '@element-plus/icons-vue'
import { el, pa, ro } from 'element-plus/es/locales.mjs'
import UserHome from './UserHome.vue'

// 报名成员相关数据
const signupDialogVisible = ref(false)
const signupMembers = ref([])
const loading = ref(false)

const userId = ref(parseInt(localStorage.getItem('userId') || 0))

const showPaymentDialog = ref(false)
const showInitiatePaymentDialog = ref(false)
const initiatePaymentForm = reactive({
  amount: 0
})

const viewPayment = async (activity) => {
  currentActivity.value = activity
  loadPaymentRecords(activity.activityId)
  showPaymentDialog.value = true
}

const submitInitiatePayment = async () => {
  try {
    const response = await service.post('/payment/initiate-payment', {
      activityId: currentActivity.value.activityId,
      amount: initiatePaymentForm.amount
    })
    if(response.success) {
      ElMessage.success('发起缴费成功')
      showInitiatePaymentDialog.value = false
      loadPaymentRecords(currentActivity.value.activityId)
    } else {
      ElMessage.error(response.message || response.data || '发起缴费失败')
    }
  } catch (error) {
    ElMessage.error('发起缴费失败：' + error.message)
  }
}


// 查看活动报名成员
const viewSignups = async (activity) => {
  try {
    loading.value = true
    signupDialogVisible.value = true
    const response = await service.get(`/club-member/register-user/${activity.activityId}`)
    if (response.success) {
      signupMembers.value = response.data
    } else {
      ElMessage.error(response.message || response.data|| '获取报名成员失败')
    }
  } catch (error) {
    ElMessage.error('获取报名成员失败：' + error.message)
  } finally {
    loading.value = false
  }
}

const showCreateClubForm = ref(false)
const showPendingApplications = ref(false)
const pendingApplications = ref([])
const approvedClubs = ref([])

// 监听pendingApplications变化
watch(pendingApplications, async (newVal, oldVal) => {
  try {
    if (newVal.length !== oldVal?.length) {
      await loadPendingApplications()
    }
  } catch (error) {
    console.error('更新待审核社团列表失败:', error)
  }
})

// 监听approvedClubs变化
watch(approvedClubs, async (newVal, oldVal) => {
  try {
    if (newVal.length !== oldVal?.length) {
      await loadPendingApplications()
    }
  } catch (error) {
    console.error('更新已通过社团列表失败:', error)
  }
})

const selectedClub = ref(null)
const activeTab = ref('info')
const memberActiveTab = ref('applications')
const dialogVisible = ref(false)

// 成员详情相关
const memberInfoVisible = ref(false)
const selectedMember = ref(null)

// 权限管理相关
const roleManageVisible = ref(false)
const roleForm = reactive({
  userId: 0,
  clubId: 0,
  role: 0,
  processedBy: userId.value,
  processedTime: new Date().getTime()
})

// 缴费记录相关
const paymentRecords = ref([])
const totalPayments = ref(0)
const pendingPayments = ref(0)
const totalPaymentsNum = ref(0)

const selectClub = (club) => {
  selectedClub.value = club
  activeTab.value = 'activity'  
  // activities.value = []
  // console.log("back:"+activities.value)
  loadActivities()
  console.log("select:",activities.value)
}

const backToList = () => {
  selectedClub.value = null
}

// 查看成员详细信息
const checkMemberInfo = async (member) => {
  try {
    const { data } = await service.get(`/club-member/club/${selectedClub.value.id}`)
    const memberDetail = data.find(m => m.username === member.username)
    if (memberDetail) {
      selectedMember.value = memberDetail
      memberInfoVisible.value = true
    } else {
      ElMessage.warning('未找到该成员的详细信息')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '获取成员信息失败')
  }
}

// 管理成员角色权限
const manageMemberRole = (member) => {
  roleForm.userId = member.userId
  roleForm.id = member.clubMemberId
  roleForm.role = member.role
  roleManageVisible.value = true
}

// 提交角色变更
const submitRoleChange = async () => {
  try {
    roleForm.clubId = selectedClub.value.id
    roleForm.status = 1
    roleForm.processedBy = userId.value
    roleForm.processedTime = new Date().toISOString()
    const res = await service.put(`/club-member/modify-club-member-auth`, {
      ...roleForm,
      role:roleForm.role == "社长" ? 2 : roleForm.role == "副社长" ? 1 : 0
    })
    if (!res.success){
      ElMessage.error(res.message || res.data || '角色修改失败')
      return
    }
    ElMessage.success('角色修改成功')
    roleManageVisible.value = false
    loadMembers() // 重新加载成员列表
  } catch (error) {
    ElMessage.error(error.message || '角色修改失败')
  }
}

const createClubForm = reactive({
  name: '',
  description: '',
  presidentId: 0,
  contact: '',
  location: ''
})

const submitCreateClub = async () => {
  // 表单验证
  if (!createClubForm.name.trim()) {
    ElMessage.warning('请输入社团名称')
    return
  }
  if (!createClubForm.description.trim()) {
    ElMessage.warning('请输入社团简介')
    return
  }
  if (!createClubForm.contact.trim()) {
    ElMessage.warning('请输入联系方式')
    return
  }
  if (!createClubForm.location.trim()) {
    ElMessage.warning('请输入活动场地')
    return
  }
  // 提交表单
  try {
    // 设置当前用户ID为社长ID
    createClubForm.presidentId = parseInt(localStorage.getItem('userId') || 0)
    console.log(createClubForm)
    
    const res = await service({
      url: '/club/create',
      method: 'post',
      data: createClubForm
    })
    if (!res.success){
      ElMessage.error('提交失败：' + (res.message||res.data||'未知错误'))
      return
    }
    ElMessage.success('社团创建申请已提交，请等待管理员审核')
    showCreateClubForm.value = false
    Object.keys(createClubForm).forEach(key => {
      if (key !== 'presidentId') {
        createClubForm[key] = ''
      }
    })
  } catch (error) {
    ElMessage.error('提交失败：' + error.message)
  }
}

// 社团信息管理
const clubInfo = reactive({
  name: '',
  description: '',
  contact: '',
  venue: ''
})

// 监听selectedClub变化，自动填充表单
watch(() => selectedClub.value, (newClub) => {
  if (newClub) {
    clubInfo.name = newClub.name
    clubInfo.description = newClub.description
    clubInfo.contact = newClub.contact
    clubInfo.venue = newClub.location
  }
})

// 加载缴费记录
const loadPaymentRecords = async (acId) => {
  try {
    const response = await service({
      url: `/payment/activity/${parseInt(acId)}`,
      method: 'get',
      params: {
        pageNum: 1,
        pageSize: 1000
      }
    })
    if (response.success) {
      paymentRecords.value = response.data.map(record => ({
        ...record,
        amount: Number(record.amount).toFixed(2)
      })).sort((a, b) => {
          // 待缴费排在最前面
          if (a.status === 0 && b.status !== 0) return -1;
          if (a.status !== 0 && b.status === 0) return 1;
          // 已缴费按时间降序排序
          if (a.status === 1 && b.status === 1) {
            return new Date(b.paymentTime) - new Date(a.paymentTime);
          }
          return 0;
      })
    }
  } catch (error) {
    console.error('加载缴费记录失败:', error)
  }

  // 计算总的缴费金额
  try {
    const res = await service({
      url: `/payment/activity/${parseInt(acId)}`,
      method: 'get',
      params: {}
    })
    if (res.success) {
      totalPayments.value = res.data
                                .filter(record => record.status === 1)
                                .reduce((sum, record) => sum + record.amount, 0)
      totalPaymentsNum.value = res.data.length
      pendingPayments.value = res.data
                                  .filter(record => record.status === 0)
                                  .reduce((sum, record) => sum + record.amount, 0)
    }
    else{
      ElMessage.error('加载缴费记录失败：' + (res.message||res.data||'未知错误'))
    }
  }catch (error) {
    console.error('加载缴费记录失败:', error)
    ElMessage.error('加载缴费记录失败')
  }
}

const removeMember = async (memberId) => {
  if (memberId === selectedClub.value.presidentId) {
    ElMessage.warning('不能移除社长')
    return
  }
  try {
    const result = await ElMessageBox.confirm(
      '确定要移除该成员吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    if (result === 'confirm'){
      const response = await service({
        url: `/club-member/remove?userId=${memberId}&clubId=${selectedClub.value.id}`,
        method: 'delete'
      })
      if (response.success) {
        ElMessage.success('成员移除成功')
        loadMembers()
      } else {
        ElMessage.error('移除成员失败：' + response.message)
      }
    }
    
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.response?.data?.message || '操作失败')
    }
  }
}

// 解散社团对话框显示状态
const showDeleteConfirm = ref(false)

// 解散社团
const deleteClub = async () => {
  try {
    const response = await service({
      url: `/club/delete?clubId=${selectedClub.value.id}`,
      method: 'delete'
    })
    if (response.success) {
      ElMessage.success('社团已解散')
      showDeleteConfirm.value = false
      backToList()
      fetchClubs() // 刷新社团列表
    } else {
      ElMessage.error('解散社团失败：' + response.message)
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '解散社团失败')
  }
}

const updateClubInfo = async () => {
  if (!selectedClub.value) {
    ElMessage.warning('请先选择要修改的社团')
    return
  }

  // 表单验证
  if (!clubInfo.name.trim()) {
    ElMessage.warning('请输入社团名称')
    return
  }
  if (!clubInfo.description.trim()) {
    ElMessage.warning('请输入社团简介')
    return
  }
  if (!clubInfo.contact.trim()) {
    ElMessage.warning('请输入联系方式')
    return
  }
  if (!clubInfo.venue.trim()) {
    ElMessage.warning('请输入活动场地')
    return
  }

  try {
    const response = await service({
      url: '/club/update',
      method: 'put',
      data: {
        id: selectedClub.value.id,
        name: clubInfo.name,
        description: clubInfo.description,
        presidentId: selectedClub.value.presidentId,
        contact: clubInfo.contact,
        location: clubInfo.venue
      }
    })

    if (response.success) {
      ElMessage.success('社团信息更新成功')
      // 更新selectedClub的信息
      selectedClub.value = {
        ...selectedClub.value,
        name: clubInfo.name,
        description: clubInfo.description,
        contact: clubInfo.contact,
        location: clubInfo.venue
      }
    } else {
      ElMessage.error(response.message ||response.data|| '更新失败')
    }
  } catch (error) {
    ElMessage.error('更新失败：' + error.message)
  }
}

// 活动发布管理
const activities = ref([])
const editDialogVisible = ref(false)


const showPublishSummary = (activity) => {
  currentActivity.value = activity
  Object.assign(editActivityForm, activity)
  summaryForm.summary = activity.summary || ''
  editActivityForm.summary = summaryForm.summary
  editActivityForm.id = editActivityForm.activityId
  summaryDialogVisible.value = true
}

const submitSummary = async () => {
  if (!summaryForm.summary.trim()) {
    ElMessage.warning('请输入活动总结内容')
    return
  }
  try {
    editActivityForm.summary = summaryForm.summary
    const response = await service({
      url: '/activity/update',
      method: 'post',
      data: editActivityForm
    })

    if (response.success) {
      ElMessage.success('活动总结发布成功')
      summaryDialogVisible.value = false
      loadActivities()
    } else {
      ElMessage.error(response.message || response.data || '发布失败')
    }
  } catch (error) {
    ElMessage.error('发布失败：' + error.message)
  }
}

const activityFormRef = ref(null)
const editActivityFormRef = ref(null)
const summaryDialogVisible = ref(false)
const currentActivity = ref(null)
const summaryForm = reactive({
  summary: ''
})

const activityForm = reactive({
  id: null,
  clubId: null,
  title: '',
  description: '',
  summary: '',
  startTime: null,
  endTime: null,
  location: '',
  maxAttendees: null,
  status: null,
  createTime: null
})

const activityRules = {
  title: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
  description: [{ required: true, message: '请输入活动描述', trigger: 'blur' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  location: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
  maxAttendees: [{ required: true, message: '请输入最大人数', trigger: 'change' }],
  status: [{ required: true, message: '请选择活动状态', trigger: 'change' }]
}

const formatDateTime = (time) => {
  if (!time) return ''
  const date = new Date(time)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

const getStatusType = (status) => {
  const statusMap = {
    0: 'info',    // 未开始
    1: 'success', // 进行中
    2: 'warning', // 已结束
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    0: '未开始',
    1: '进行中',
    2: '已结束',
  }
  return statusMap[status] || '未知'
}
 
const loadActivities = async () => {
  try {
    const res = await service.post(
      `/activity/list`,
      {
        clubId: selectedClub.value.id,
        pageNum: 1,
        pageSize: 1000
      }
    )
    if (res.success) {
      activities.value = res.data
      console.log('活动数据:', activities.value) // 添加日志以便调试
    }
    else {
      ElMessage.error('加载活动列表失败：' + (res.message || res.data))
    }
  } catch (error) {
    console.error('加载活动列表错误:', error) // 添加错误日志
    ElMessage.error('加载活动列表失败：' + error.message)
  }
}

const submitActivity = async () => {
  if (!activityFormRef.value) return
  await activityFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 设置clubId
        activityForm.clubId = selectedClub.value.id
        
        const res = await service.post('/activity/publish', activityForm)
        if (!res.success) {
          ElMessage.error(res.message || res.data || '发布失败')
          return
        }
        ElMessage.success('活动发布成功')
        loadActivities()
        dialogVisible.value = false
        resetActivityForm()
        emit('activity-updated')
      } catch (error) {
        ElMessage.error(error.message)
      }
    }
  })
}

const resetActivityForm = () => {
  activityForm.id = undefined
  activityForm.clubId = undefined
  activityForm.title = ''
  activityForm.description = ''
  activityForm.summary = ''
  activityForm.startTime = ''
  activityForm.endTime = ''
  activityForm.location = ''
  activityForm.maxAttendees = 1
  activityForm.status = 0
}

const handleEdit = (row) => {
  Object.assign(editActivityForm, row)
  editDialogVisible.value = true
}


const submitEditActivity = async () => {
  if (!editActivityFormRef.value) return
  await editActivityFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // editActivityForm.summary = '六百六十六，不如打瓦'
        editActivityForm.id = editActivityForm.activityId
        const res = await service.post('/activity/update', editActivityForm)
        if(!res.success) {
          ElMessage.error(res.message || res.data || '更新失败')
          return
        }
        ElMessage.success('活动更新成功')
        editDialogVisible.value = false
        loadActivities()
        emit('activity-updated')
      } catch (error) {
        ElMessage.error(error.message)
      }
    }
  })
}

const handleDelete = async (id) => {
  try {
    const res = await service.post(`/activity/delete/${id}`)
    if(!res.success) {
      ElMessage.error(res.message || res.data || '删除失败')
      return
    }
    ElMessage.success('活动删除成功')
    loadActivities()
    emit('activity-updated')
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const editActivityForm = reactive({
  "id": 0,
  "clubId": 0,
  "title": "",
  "description": "",
  "summary": "",
  "startTime": "",
  "endTime": "",
  "location": "",
  "maxAttendees": 0,
  "status": 0
})

// 签到情况相关
const attendanceDialogVisible = ref(false)
const attendanceList = ref([])
const attLoading = ref(false)
const attCurrentPage = ref(1)
const attPageSize = ref(10)

const viewAttendance = async (activity) => {
  attendanceDialogVisible.value = true
  attLoading.value = true
  try {
    const res = await service.get(`/activity/attendance-user?activityId=${activity.activityId}`)
    if (res.success) {
      attendanceList.value = res.data
    } else {
      ElMessage.error(res.message || '获取签到情况失败')
    }
  } catch (error) {
    ElMessage.error('获取签到情况失败：' + error.message)
  } finally {
    attLoading.value = false
  }
}


// 成员管理
const memberApplications = ref([])
const members = ref([])

// 监听memberApplications变化，当没有待审核申请时自动切换到成员列表
watch(memberApplications, (newApplications) => {
  if (newApplications.length === 0 && activeTab.value === 'member') {
    memberActiveTab.value = 'list'
  }
})

const loadMembers = async () => {
  try {
    // 加载待审核的成员申请
    const pendingRes = await service.get(`/club-member/pending/${selectedClub.value.id}`)
    memberApplications.value = pendingRes.data

    // 加载成员列表
    const membersRes = await service.get(`/club-member/club/${selectedClub.value.id}`)
    members.value = membersRes.data.map(member => ({
      ...member,
      role: member.role === 2 ? '社长' : member.role === 1 ? '副社长' : '普通成员'
    }))
  } catch (error) {
    ElMessage.error('加载成员管理数据失败：' + error.message)
  }
}

const handleApprove = async (application) => {
  try {
    const res = await service.put(`/club-member/approve/${application.clubMemberId}`)
    if (!res.success) {
      ElMessage.error(res.data||res.message + "currentUser:"+userId.value)
      return
    }
    ElMessage.success('已通过申请')
    loadMembers()
  } catch (error) {
    ElMessage.error('审核失败：' + (error.response?.data?.message || error.message || '网络请求失败'))
  }
}

const handleReject = async (application) => {
  try {
    const res = await service.put(`/club-member/reject/${application.clubMemberId}?processedBy=${userId.value}`)
    if (!res.success) {
      ElMessage.error(res.data||res.message + "currentUser:"+userId.value)
      return
    }
    ElMessage.success('已拒绝申请')
    loadMembers()
  } catch (error) {
    ElMessage.error('审核失败：' + (error.response?.data?.message || error.message || '网络请求失败'))
  }
}

watch(() => activeTab.value, (newVal) => {
  if (newVal === 'member') {
    loadMembers()
  }
})

// 初始化加载数据
const loadPendingApplications = async () => {
  try {
    const res = await service({
      url: '/club/search/my',
      method: 'get'
    })
    pendingApplications.value = res.data.filter(club => club.status === 0)
    approvedClubs.value = res.data.filter(club => club.status === 1)
    rejectedClubs.value = res.data.filter(club => club.status === 2)
    
    // 如果当前选中的社团不在列表中，清除选择
    if (selectedClub.value && !approvedClubs.value.find(club => club.id === selectedClub.value.id)) {
      selectedClub.value = null
    }
  } catch (error) {
    ElMessage.error('加载社团记录失败')
  }
}

let intervalId = null

onMounted(() => {
  userId.value = parseInt(localStorage.getItem('userId') || 0)
  loadPendingApplications()

  intervalId = setInterval(() => {
    loadPendingApplications()
  }, 25000)

})

onBeforeUnmount(() => {
  clearInterval(intervalId) // 离开页面时清除定时器，避免内存泄漏
})

const clubListTab = ref('president')
const rejectedClubs = ref([])

const managementTabs = [
  { name: 'activity', label: '活动管理' },
  { name: 'member', label: '成员管理' },
  { name: 'info', label: '社团信息管理' },
  { name: 'delete', label: '解散社团' }
]
</script>

